<template>
<block>
<view class="container-001">
			<view class="header-1-001">
				<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true"
					interval="5000" duration="500" @change="change" indicator-color="#cccccc"
					indicator-active-color="#676767">
					<!-- <swiper-item class="margin-top-sm" v-for="(item,index) in (swiperData)" :key="index"> -->
					<swiper-item v-for="(item,index) in (swiperData)" :key="index">
						<navigator hover-class="none" :url="item.phoneUrl">
							<image class="swiper-image" :src="item.phoneImg"></image>
						</navigator>
					</swiper-item>
				</swiper>
				<!-- <view class="swiper swiper-1-001" id="swiper">
					<view class="swiper-wrapper">
						<view class="swiper-slide">
							<img src="../" class="image" />
						</view>
						<view class="swiper-slide">
							<img src="../../static/banner-02.jpg" class="image" />
						</view>
					</view>
					<view class="swiper-pagination"></view>
				</view> -->
				<view class="goods-detail-001">
					<view class="pricegoods">250</view>
					<view class="bargoods">
						<view class="titlegoods">醇醉黑标中小型犬全期狗粮10KG醇醉黑标中小型犬全期狗粮10KG</view>
						<view class="collectiongoods">收藏</view>
					</view>
					<view class="descgoods">醇醉黑标中小型犬全期狗粮10KG</view>
					<view class="othergoods">
						<view class="expressgoods">快递:￥20-60</view>
						<view class="salegoods">销量:19</view>
					</view>
				</view>
			</view>
			<view class="h50"></view>
		</view>
		<view class="fixed-btn-panel-001">
			<a href="index.html" class="iconfixed-btn">店铺</a>
			<a href="cart.html" class="iconfixed-btn">购物车</a>
			<view class="btnfixed-btn">加入购物车</view>
			<view class="buyfixed-btn">买</view>
		</view>
</block>
</template>

<script>
import baseRade from "@/components/base-rade/index";
import poster from "@/components/wxa-plugin-canvas/poster/index";
import Poster from '../../../components/wxa-plugin-canvas/poster/poster';

const {
  base64src
} = require('../../../utils/base64src.js');

const app = getApp();
export default {
	components: {
	  baseRade,
	  poster
	},
	data() {
		return {
		  config: app.globalData.config,
		  // goodsSpu: null,
		  goodsSpu: {
			  picUrls: ['https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2Fcb85efb9ed928dd3c6fe39620fe2e69934606a40.jpg&refer=http%3A%2F%2Fi0.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648124935&t=1001a3e087bf1c0e2f47a1304b27a1c3','https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpica.zhimg.com%2Fv2-4bb7fe71ef26c1863a3005eabb2a8ba6_r.jpg%3Fsource%3D1940ef5c&refer=http%3A%2F%2Fpica.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648124935&t=cb141dbc0bd3d77bd6e7f03fbd80a4a8'],
			  salesPrice: 20,
			  name: '醇醉黑标中小型犬全期狗粮10KG醇醉黑标中小型犬全期狗粮10KG',
			  stock: '200'
		  },
		  swiperData: [
		  	{phoneImg: '../../../static/image/banner-02.jpg'},
		  	{phoneImg: '../../../static/image/banner.jpg'},
		  	{phoneImg: '../../../static/image/banner-02.jpg'}
		  ],
		  currents: 1,
		  cartNum: 1,
		  goodsSpecData: [],
		  shoppingCartCount: 0,
		  shareShow: '',
		  modalService: '',
		  id: "",
		  modalSku: false,
		  posterUrl: "",
		  posterShow: false,
		  place: "",
		  article_description: "",
		  shoppingCartCountFun: "",
		  posterConfig: {}
		};
	}, 
	onLoad(options) {
	  let id;

	  if (options.scene) {
		//接受二维码中参数
		id = decodeURIComponent(options.scene);
	  } else {
		id = options.id;
	  }

	  this.setData({
		id: id
	  });
	  app.globalData.initPage().then(res => {
		this.goodsGet(id);
		this.shoppingCartCountFun();
	  });
	}, 
	onShareAppMessage: function () {
	  let goodsSpu = this.goodsSpu;
	  let title = goodsSpu.name;
	  let imageUrl = goodsSpu.picUrls[0];
	  let path = 'pages/goods/goods-detail/index?id=' + goodsSpu.id;
	  return {
		title: title,
		path: path,
		imageUrl: imageUrl,
		success: function (res) {
		  if (res.errMsg == 'shareAppMessage:ok') {
			console.log(res.errMsg);
		  }
		},
		fail: function (res) {// 转发失败
		}
	  };
	}, 
	methods: {
	  goodsGet(id) {
		app.globalData.api.goodsGet(id).then(res => {
		  let goodsSpu = res.data;
		  this.setData({
			goodsSpu: goodsSpu
		  }); //html转wxml

		  //WxParse.wxParse('description', 'html', goodsSpu.description, this, 0)
		  this.article_description = this.escape2Html(goodsSpu.description);;
		});
	  },

	  change: function (e) {
		this.setData({
		  currents: e.detail.current + 1
		});
	  },

	  // 购买或加入购物车
	  toDo(e) {
		let canDo = true;

		if (canDo) {
		  let goodsSpu = this.goodsSpu;

		  if (e.currentTarget.dataset.type == '1') {
			//加购物车
			if (this.shoppingCartId) {
			  app.globalData.api.shoppingCartEdit({
				id: this.shoppingCartId,
				spuId: goodsSpu.id,
				quantity: this.cartNum,
				addPrice: goodsSpu.salesPrice,
				spuName: goodsSpu.name,
				picUrl: goodsSpu.picUrls ? goodsSpu.picUrls[0] : ''
			  }).then(res => {
				uni.showToast({
				  title: '修改成功',
				  duration: 5000
				});
				this.shoppingCartCountFun();
			  });
			} else {
			  app.globalData.api.shoppingCartAdd({
				spuId: goodsSpu.id,
				quantity: this.cartNum,
				addPrice: goodsSpu.salesPrice,
				spuName: goodsSpu.name,
				picUrl: goodsSpu.picUrls ? goodsSpu.picUrls[0] : ''
			  }).then(res => {
				uni.showToast({
				  title: '添加成功',
				  duration: 5000
				});
				this.setData({
				  modalSku: false
				});
				this.shoppingCartCountFun();
			  });
			}
		  } else {
			//立即购买，前去确认订单
			if (this.goodsSpu.stock <= 0) {
			  uni.showToast({
				title: '抱歉，库存不足暂时无法购买',
				icon: 'none',
				duration: 2000
			  });
			  return;
			}
			/* 把参数信息异步存储到缓存当中 */


			uni.setStorage({
			  key: 'param-orderConfirm',
			  data: [{
				spuId: goodsSpu.id,
				quantity: this.cartNum,
				salesPrice: goodsSpu.salesPrice,
				spuName: goodsSpu.name,
				picUrl: goodsSpu.picUrls ? goodsSpu.picUrls[0] : ''
			  }]
			});
			uni.navigateTo({
			  url: '/pages/order/order-confirm/index'
			});
		  }
		}
	  },

	  shoppingCartCountFun() {
		app.globalData.api.shoppingCartCount().then(res => {
		  let shoppingCartCount = res.data;
		  this.setData({
			shoppingCartCount: shoppingCartCount
		  }); //设置TabBar购物车数量

		  app.globalData.shoppingCartCount = shoppingCartCount + '';
		});
	  },

	  operateCartEvent() {
		this.shoppingCartCountFun();
	  },

	  shareShowFun() {
		this.setData({
		  shareShow: 'show'
		});
	  },

	  shareHide() {
		this.setData({
		  shareShow: ''
		});
	  },

	  onPosterSuccess(e) {
		const {
		  detail
		} = e;
		this.setData({
		  posterUrl: detail
		});
	  },

	  onPosterFail(err) {
		console.error(err);
	  },

	  hidePosterShow() {
		this.setData({
		  posterShow: false,
		  shareShow: ''
		});
	  },

	  /**
	   * 异步生成海报
	   */
	  onCreatePoster() {},

	  //点击保存到相册
	  savePoster: function () {},

	  handleContact(e) {
		console.log(e);
	  },

	  showModalService() {
		console.log("占位：函数 showModalService 未声明");
	  }
	}
};
</script>
<style >
	.product-bg{width:100%;position:relative;}
	.product-bg swiper{width:100%;height:calc(100vw);position:relative;}
	.product-bg .page-index{
	  position:absolute;right:30rpx;bottom:30rpx;
	}
	.cu-bar.tabbar.shop .action {
	  width: unset;
	}
	.to-down{
	  margin-bottom: 100rpx
	}
	.screen{
	  width:94% !important; 
	  border-radius: 20rpx; 
	  min-height: 900rpx; 
	  margin:auto;
	  background-color: #ececec;
	}
	.screen-image{
	  padding-top:80rpx;
	  height:780rpx !important;
	}
	.shopping-cart{
	  background-color: #2d2d2f !important;
	  font-weight:300;
	  width:220rpx;
	}
	.buy-now{
	  background-color: #2967ff !important;
	  font-weight:300;
	  width:220rpx;
	}
	.screen-swiper {
		height: 750upx;
	}
	.swiper-image {
		/* width: 96% !important; */
		height: 750rpx !important;
		/* margin: 40rpx auto !important; */
		/* border-radius: 20rpx; */
		box-shadow: 0rpx 10rpx 60rpx rgba(211, 211, 211, 1);
		object-fit: cover;
	}
</style>